<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>v-for指令</title>
  <style type="text/css">
    /* 隐藏li前面的小圆点 */
    li{
      list-style: none
    } 
    /* 块级元素不换行 */
    .singer{
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="app">
   <input type="button" value="增加" @click="add()">
   <!-- @click 无参函数加不加括号都可以 -->
   <input type="button" value="减少" @click='remove'>

   <ul>
     <li v-for="(item,index) in singerList">
       <div>
          <div class="singer">{{index+1}}</div>
          <div class="singer">{{item.name}}</div>
       </div>
     </li>
   </ul>
  </div>

  <!-- 导入开发版本的Vue.js  -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 创建Vue实例对象, 设置el属性和data属性
    var app = new Vue({
      el: '#app',
      data: {
        singerList:[],
      },
      methods: {
        add:function(){
          this.singerList.push({name:'周杰伦'});
          this.singerList.push({name:'王力宏'})
        },

        remove:function(){
          this.singerList.shift();
        }  
      }
    });  
  </script>
</body>

</html>